<template>
    <div class="goodsinfo-container">
        <transition @before-enter="beforEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-if="ballFlag"></div>
        </transition>
        <!--商品轮播图区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <swiper v-bind:datalist="carousels" :isfull="false"></swiper>
            </div>
        </div>
        <!--商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsInfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>
                        市场价格: <del>￥{{goodsInfo.market_price}}</del>&nbsp;&nbsp; 销售价:<span class="now-price">￥{{goodsInfo.sell_price}}</span>
                    </p>
                    <div class="number-input">
                        <span class="count">购买数量:</span>
                        <!--max渲染时对象的值异步加载,值为undefined-->
                        <div id="mui-numbox" class="mui-numbox" data-numbox-min="1">
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                            <input id="test" class="mui-input-numbox" type="number" value="1">
                            <button class="mui-btn mui-btn-numbox-plus" type="button" disabled="">+</button>
                        </div>
                    </div>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addShorpcar">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
        <!--商品参数区域-->
        <div class="mui-card">
            <div class="mui-card-header">页眉</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号:{{goodsInfo.goods_no}}</p>
                    <p>库存情况:{{goodsInfo.stock_quantity}}</p>
                    <p>上架时间:{{goodsInfo.add_time|dateFormat('YYYY-MM-DD')}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" plain size="large" @click="goComment(id)">商品评论</mt-button>
            </div>
        </div>

    </div>
</template>

<script>
    import connector from '../../base/interface.js';
    /*导入轮播图组件*/
    import swiper from '../swiper.vue';
    import mui from '../../../lib/mui/js/mui.min';
    export default {
        data(){
            return{
                id:this.$route.params.id,
                carousels:[],
                goodsInfo:{},
                /*控制小球隐藏显示标识符*/
                ballFlag:false
            }
        },methods:{
            getCarouselData(){
                /*获取轮播图数据*/
                connector.getImgList(this.id).then(result=>{
                    result.forEach((item,index)=>{
                        item.id=index;
                        item.url=item.src;
                    });
                    this.carousels=result;
                },err=>{
                    console.log(err.message);
                })
            },
            getGoodsInfo(){
                /*获取商品详细数据*/
                connector.getGoodsInfo(this.id).then(result=>{
                    this.goodsInfo=result;
                    /*设置购买数量最大*/
                    mui('#mui-numbox').numbox().setOption('max',result.stock_quantity);
                },err=>{

                })
            },
            goDesc(id){
                /*点击使用编程式导航，跳转到图文介绍页面*/
                this.$router.push({name:'goodsdesc',params:{id}});
            },
            goComment(id){
                this.$router.push({name:'goodscomment',params:{id}});
            },
            addShorpcar(){
                /*加入购物车*/
                this.ballFlag=true;
                var sum=mui("#mui-numbox").numbox().getValue();
                if(sum>this.goodsInfo.stock_quantity){
                    sum=this.goodsInfo.stock_quantity;
                    mui("#mui-numbox").numbox().setValue(sum);
                }
                /*组建商品对象,存储到vuex数据共享区*/
                var goods={id:this.id,count:sum,price:this.goodsInfo.sell_price,selected:false};
                this.$store.commit('addToCar',goods);

            },
            beforEnter(el){
                /*小球半场动画钩子函数*/
                el.style.transform="translate(0,0)";

            },
            enter(el,done){
                /*小球半场动画钩子函数*/
                /*小球动漫终点坐标需要动态根据页面改变*/
                var ball_start=el.getBoundingClientRect();
                var ball_end=document.getElementById('cart-ball').getBoundingClientRect();
                el.offsetWidth;
                el.style.transform=`translate(${ball_end.left-ball_start.left}px,${ball_end.top-ball_start.top}px)`;
                el.style.transition='all 0.8s cubic-bezier(.4,-0.3,1,.68)';
                done()
            },
            afterEnter(){
                /*小球半场动画钩子函数*/
                this.ballFlag=false;
            }
        },created() {
            this.getCarouselData();
            this.getGoodsInfo();
        },mounted(){
            /*初始化数字选择框*/
            mui('#mui-numbox').numbox();
        },components:{
            swiper
        }
    }
</script>

<style lang="scss" scoped>
@import "../../base/baseRem.scss";
.goodsinfo-container{
    position: relative;
    .ball{
        width: remFu(15);
        height: remFu(15);
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: remFu(305);
        left: remFu(140);
        z-index: 10;
    }
    .mui-card-header{
        font-weight: bold;
    }
    .mui-card-footer{
        flex-direction: column;
        button{
            margin: 5px 0;
        }
    }
    .now-price{
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
    .number-input{
        .count{
            font-weight: bold;
        }
        .mui-numbox{
            margin-bottom: remFu(10);
        }
    }
}
</style>
